<template>
    <div>
        <Modal v-model="selectSwitch" width="600">
            <p slot="header" style="text-align:center">
                <span>设置标签</span>
            </p>
            <div class="disFlex vertical">
                <div class="tagsList disFlex vertical">
                    <p class="title">选择现有标签</p>
                    <div>
                        <CheckboxGroup v-model="social">
                            <Checkbox class="check-item" size="large" label="twitter">
                                <Icon type="logo-twitter"></Icon>
                                <span>Twitter</span>
                            </Checkbox>
                            <Checkbox class="check-item" size="large" label="facebook">
                                <Icon type="logo-facebook"></Icon>
                                <span>Facebook</span>
                            </Checkbox>
                            <Checkbox class="check-item" size="large" label="github">
                                <Icon type="logo-github"></Icon>
                                <span>Github</span>
                            </Checkbox>
                            <Checkbox class="check-item" size="large" label="snapchat">
                                <Icon type="logo-snapchat"></Icon>
                                <span>Snapchat</span>
                            </Checkbox>
                            <Checkbox class="check-item" size="large" label="snapchat">
                                <Icon type="logo-snapchat"></Icon>
                                <span>Snapchat</span>
                            </Checkbox>
                            <Checkbox class="check-item" size="large" label="snapchat">
                                <Icon type="logo-snapchat"></Icon>
                                <span>Snapchat</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </div>
                </div>
                <div class="addTagsInput disFlex vertical">
                    <p class="title">新增标签</p>
                    <div class="tag-input disFlex Flex-middle">
                        <Input v-model="value" size="large" placeholder="请输入标签名字" />
                        <Button class="add-btn" size="large" type="primary">添加</Button>
                    </div>
                </div>
            </div>
            <div class="disFlex Flex-center" slot="footer">
                <Button size="large" type="primary">确定</Button>
                <Button size="large" type="default">取消</Button>
            </div>
        </Modal>
    </div>
</template>
<style scoped lang="less">
// 所有标签
.tagsList {
    width: 100%;

    .title {
        font-size: 14px;
        font-weight: bold;
        color:  #464c5b;
    }

    .check-item {
        margin-top: 15px;
    }
}

// 新增标签
.addTagsInput {
    margin-top: 30px;

    .title {
        font-size: 14px;
        font-weight: bold;
        color:  #464c5b;
    }

    .tag-input {
        margin-top: 15px;

        .add-btn {
            margin-left: 15px;
        }
    }
}
</style>
<script>
    import {shopSelectList} from 'api/shop'
    export default {
        props: {
            
        },
        data () {
            return {
                // 开关
                selectSwitch: true,

                // 标签名
                tagTitle: '',

                // 
                allTagsArray: [],

                // 已选
                hasSelectArray: [],

                social: ['facebook', 'github'],
                fruit: ['苹果'],
                value: '123'
            }
        },
        computed:{
        },
        mounted(){
        },
        methods: {
        }
    }
</script> 